<template>
  <div id="myDiv" ref="myChart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "about",
  data() {
    return {
      kData: [
        [20, 34, 10, 38],
        [40, 35, 30, 50],
        [31, 38, 33, 44],
        [38, 15, 5, 42],
      ],
    };
  },
  computed: {
    OnekData() {
      let list = this.kData.map((v) => v[0]);
      return list;
    },
  },
  mounted() {
    // 1.初始化
    let myChart = echarts.init(this.$refs.myChart);

    // 2.设置echarts数据
    let option = {
      title: {
        text: "漏斗图",
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c}%",
      },
      legend: {
        data: ["Show", "Click", "Visit", "Inquiry", "Order"],
      },
      series: [
        {
          name: "漏斗",
          type: "funnel",
          data: [
            { value: 60, name: "Visit" },
            { value: 40, name: "Inquiry" },
            { value: 20, name: "Order" },
            { value: 80, name: "Click" },
            { value: 100, name: "Show" },
          ],
          left: "10%",
          sort: "ascending", // 排序 none顺序
          itemStyle: {
            borderColor: "#333",
            borderWidth: 3,
          },
          label: {
            show: true,
            position: "inside",
          },
          emphasis: {
            label: {
              fontSize: 30,
            },
          },
        },
      ],
    };
    // 4.绘制图标
    myChart.setOption(option);
  },
};
</script>

<style>
#myDiv {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>